import React, {useState} from 'react';
import ReactEcharts from "echarts-for-react";
import * as echarts from 'echarts';
import {Button, Space} from "antd";
import './index.less'
import {SizeType} from "antd/es/config-provider/SizeContext";
import {CarOutlined} from "@ant-design/icons";
//柱状图配置
const barOption = {
    backgroundColor: 'transparent',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['门禁进入', '门禁外出'],
        align: 'left',
        top: 0,
        right: 20,
        textStyle: {
            color: "#c1c5cd"
        },
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 12
    },
    grid: {
        top: '30%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: [
            '1号楼',
            '2号楼',
            '3号楼',
            '4号楼',
            '5号楼',
            '6号楼',
            '7号楼',
            '8号楼',
        ],
        axisLine: {
            show: true,
            lineStyle: {
                color: "#45647f",
                width: 1,
                type: "solid"
            }
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#a1d8f1",
            }
        },
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#45647f",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#a1d8f1',
                fontSize: '12px'
            }
        }
    }],
    series: [
        {
            name: '门禁进入',
            type: 'bar',
            data: [20, 50, 80, 58, 83, 68, 57, 100],
            barWidth: 8, //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
                color: '#90f140'
            }
        }, {
            name: '门禁外出',
            type: 'bar',
            data: [50, 70, 60, 61, 75, 87, 60, 62],
            barWidth: 8,
            // barGap: 1,
            itemStyle: {
                color: 'rgba(243,196,9,0.91)'
            }
        }]
}

const BigSreen = () => {
    const option = {
        title: {
            text: '阶梯瀑布图',
            subtext: 'From ExcelHome',
            sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {      // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'    // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['支出', '收入']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            splitLine: {show: false},
            data: ["11月1日", "11月2日", "11月3日", "11月4日", "11月5日", "11月6日", "11月7日", "11月8日", "11月9日", "11月10日", "11月11日"]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '辅助',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
            },
            {
                name: '收入',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
            },
            {
                name: '支出',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'bottom'
                    }
                },
                data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
            }
        ]
    };

    const [theme, setTheme] = useState('another_theme');
    const [className, setClassName] = useState('class_1');
    const [size, setSize] = useState<SizeType>('large'); // default is 'middle'

    echarts.registerTheme('my_theme', {
        backgroundColor: 'rgba(0,21,41,0.84)'
    });
    echarts.registerTheme('another_theme', {
        backgroundColor: '#f4f4f4'
    });

    function toggleTheme() {
        setTheme(theme === 'my_theme' ? 'another_theme' : 'my_theme');
    }

    function toggleClassName() {
        setClassName(className === 'class_1' ? 'class_2' : 'class_1');
    }

    return (
        <div>
            <ReactEcharts
                option={barOption}
                style={{width: '100%', height: '100%'}}
            />

            <ReactEcharts
                option={option}
                className={className}
                theme={theme}
                style={{height: 400}}
            />
            <br/>
            <Space size={size} >
                <Button onClick={toggleTheme} icon={<CarOutlined />} type="primary" shape="round">Click to Toggle theme.</Button>
                <Button onClick={toggleClassName} shape="round">Click to Toggle className.</Button>
            </Space>
        </div>
    );
};

export default BigSreen;
